// 饼图组件


import React from 'react';
// 引入echart
import * as echarts from 'echarts';
import { useEffect } from 'react';
import Pts from 'prop-types'
const Pie = (props) => {
    //useEffect 执行时机会在每次组件渲染完成后执行, 所以也可获取页面中的dom
    useEffect(() => {
        var chartDom = document.getElementById(props.id);
        // console.log('chartDom', chartDom); // null
        var myChart = echarts.init(chartDom); // 报错的问题在这inirvaid dom
        let options = {
            title: {
                text: props.title,
                left: 'center'
            },
            tooltip: {
                trigger: 'item'
            },
            series: [
                {
                    name: props.name,
                    type: 'pie',
                    radius: '50%',
                    data: props.data,
                    emphasis: {
                        itemStyle: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }
            ]
        }
        // 是否添加图例
        if (props.lengend) {
            options.legend = { orient: 'vertical', left: 'right' }
        }
        myChart.setOption(options);
    }, [])
    return (
        <div id={props.id} style={{ width: props.w, height: props.h }}>
        </div>
    );
}

// 设置参数限制
Pie.propTypes = {
    title: Pts.string.isRequired, // 主题
    data: Pts.array.isRequired, // 接收的数据
    lengend: Pts.bool.isRequired, // 是否展示图例
    name: Pts.string.isRequired
}

// 设置默认值
Pie.defaultProps = {
    w: '33.3%',
    h: '300px'
}

export default Pie;
